<template>
  <div class="service-form">
    <a-form
      ref="serviceFormRef"
      :model="serviceForm"
      layout="vertical"
      :rules="serviceRules"
    >
      <a-form-item name="aiSrvAlarmName" class="hide-required form-item">
        <template #label>
          <span>告警名称</span>
        </template>
        <a-input
          v-model:value.trim="serviceForm.aiSrvAlarmName"
          :max-length="20"
          placeholder="请输入"
          style="width: 318px"
        ></a-input>
      </a-form-item>
      <a-form-item
        v-if="serviceForm.aiSrvDelayTriggerSeconds > -1"
        class="hide-required form-item"
        name="aiSrvDelayTriggerSeconds"
      >
        <template #label>
          <span>触发延迟</span>
          <a-tooltip
            placement="top"
            title="持续检测到且超过设置周期，则产生告警"
          >
            <global-svg-icon
              icon-name="information-line"
              style="margin-left: 3px"
            ></global-svg-icon>
          </a-tooltip>
        </template>
        <a-input-number
          id="inputNumber"
          v-model:value="serviceForm.aiSrvDelayTriggerSeconds"
          :min="serviceForm?.delayMin"
          :max="serviceForm?.delayMax"
          :precision="0"
        ></a-input-number>
        &nbsp;秒
      </a-form-item>
      <a-form-item name="aiSrvTriggerInterval" class="hide-required form-item">
        <template #label>
          <span>触发间隔</span>
          <a-tooltip placement="top" title="产生报警后再次产生报警的时间间隔">
            <global-svg-icon
              icon-name="information-line"
              style="margin-left: 3px"
            ></global-svg-icon>
          </a-tooltip>
        </template>
        <a-input-number
          id="inputNumber"
          v-model:value="serviceForm.aiSrvTriggerInterval"
          :min="serviceForm?.intervalMin"
          :max="serviceForm?.intervalMax"
          :precision="0"
        ></a-input-number>

        &nbsp;秒
      </a-form-item>

      <!-- 聚众算法时(19)  =====》  区域内人数字段 -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.CROWD"
        :name="['aiSrvExtraArgs', 'areaPeopleCount']"
        :rules="[
          { required: true, message: '请输入区域内人数', trigger: 'change' },
        ]"
        class="hide-required form-item"
      >
        <template #label>
          <span>区域内人数</span>
          <a-tooltip placement="top" title="设定区域内人数达到多少人则为聚众">
            <i class="iconfont icon-information-line"></i>
          </a-tooltip>
        </template>
        <a-tooltip
          placement="bottom"
          title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！"
          trigger="focus"
        >
          <a-input-number
            id="inputNumber"
            v-model:value="serviceForm.aiSrvExtraArgs.areaPeopleCount"
            :min="serviceForm?.aiSrvExtraArgs?.areaPeopleCountMin"
            :max="serviceForm?.aiSrvExtraArgs?.areaPeopleCountMax"
            :precision="0"
          ></a-input-number>
        </a-tooltip>
        &nbsp; 人
      </a-form-item>
      <!-- 徘徊算法时(18)  =====》  停留时间字段 -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.WANDER"
        :name="['aiSrvExtraArgs', 'wanderTime']"
        class="hide-required form-item"
        :rules="[
          { required: true, message: '请输入停留时间', trigger: 'change' },
        ]"
      >
        <template #label>
          <span>停留时间</span>
          <a-tooltip
            placement="top"
            title="设定同一个人持续停留在画面内多长时间则为徘徊 "
          >
            <i class="iconfont icon-information-line"></i>
          </a-tooltip>
        </template>
        <a-tooltip
          placement="bottom"
          title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！"
          trigger="focus"
        >
          <a-input-number
            id="inputNumber"
            v-model:value="serviceForm.aiSrvExtraArgs.wanderTime"
            :min="serviceForm?.aiSrvExtraArgs?.wanderTimeMin"
            :max="serviceForm?.aiSrvExtraArgs?.wanderTimeMax"
            :precision="0"
          ></a-input-number>
        </a-tooltip>
        &nbsp;秒
      </a-form-item>
      <!--人员超限检测 ====>  区域内人数  -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.NUMBER_PEOPLE"
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'overrunPeopleNumber']"
        :rules="[
          { required: true, message: '请输入区域内人数', trigger: 'change' },
        ]"
      >
        <template #label>
          <span>区域内人数</span>
          <a-tooltip
            placement="top"
            :title="` 当区域内人数超出预设值时，则为超限`"
          >
            <i class="iconfont icon-information-line"></i>
          </a-tooltip>
        </template>
        <a-tooltip
          placement="bottom"
          title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！"
          trigger="focus"
        >
          <a-input-number
            id="inputNumber"
            v-model:value="serviceForm.aiSrvExtraArgs.overrunPeopleNumber"
            :min="serviceForm?.aiSrvExtraArgs?.overrunPeopleNumberMin"
            :max="serviceForm?.aiSrvExtraArgs?.overrunPeopleNumberMax"
            :precision="0"
          ></a-input-number>
        </a-tooltip>
        &nbsp; <span style="color: #f0f6fc">人</span>
      </a-form-item>
      <a-form-item
        v-if="serviceForm.aiSrvAlgorithmSensitivity > -1"
        name="aiSrvAlgorithmSensitivity"
        class="hide-required form-item"
      >
        <template #label>
          <span>算法灵敏度</span>
          <a-tooltip placement="top" title="数值越小越容易触发告警">
            <global-svg-icon
              icon-name="information-line"
              style="margin-left: 3px"
            ></global-svg-icon>
          </a-tooltip>
        </template>
        <div class="form-item-slider">
          <!-- <a-slider :min="0" :max="100" /> -->
          <a-slider
            v-model:value="serviceForm.aiSrvAlgorithmSensitivity"
            :min="0"
            :max="100"
          ></a-slider>
          <a-form-item no-style class="hide-required form-item">
            <a-input-number
              id="inputNumber"
              v-model:value="serviceForm.aiSrvAlgorithmSensitivity"
              :min="0"
              :max="100"
              :precision="0"
            ></a-input-number>
          </a-form-item>
          &nbsp;&nbsp;%
        </div>
      </a-form-item>
      <a-form-item name="alertImageType" class="hide-required form-item">
        <template #label>
          <span>告警图像保存</span>
        </template>
        <a-radio-group
          v-if="
            serviceForm?.aiSrvExtraArgs?.alertSaveImage === 1 ||
            serviceForm?.aiSrvId !== ServiceEnum.LIGHTING
          "
          v-model:value="serviceForm.alertImageType"
        >
          <a-radio :value="0">图片</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'alertSaveOriginalImage']"
        :rules="[
          {
            required: true,
            message: '请选择同步保存报警记录图片原图',
            trigger: 'change',
          },
        ]"
      >
        <template #label>
          <span>同步保存报警记录图片原图</span>
        </template>

        <a-radio-group
          v-model:value="serviceForm.aiSrvExtraArgs.alertSaveOriginalImage"
        >
          <a-radio :value="0">关闭</a-radio>
          <a-radio :value="1">开启</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="serviceForm?.aiSrvExtraArgs?.showDetectionArea !== undefined"
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'showDetectionArea']"
        :rules="[
          {
            required: true,
            message: '请选择报警记录图片显示检测区域',
            trigger: 'change',
          },
        ]"
      >
        <template #label>
          <span>报警记录图片显示检测区域</span>
        </template>
        <a-radio-group
          v-model:value="serviceForm.aiSrvExtraArgs.showDetectionArea"
        >
          <a-radio :value="0">关闭</a-radio>
          <a-radio :value="1">开启</a-radio>
        </a-radio-group>
      </a-form-item>
      <!-- =======================宝鸡定制算法表单开始======================= -->
      <!--大门未关闭算法，新增doorRoomSize房间大小  0小1大   -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.GATE_NOTCLOSE"
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'doorRoomSize']"
        :rules="[
          { required: true, message: '请选择房间大小', trigger: 'change' },
        ]"
        @change="changeRoomSise(serviceForm.aiSrvExtraArgs.doorRoomSize)"
      >
        <template #label> <span>房间大小</span> </template>
        <a-radio-group
          v-model:value="serviceForm.aiSrvExtraArgs.doorRoomSize"
          class="background"
        >
          <a-radio :value="1">大</a-radio>
          <a-radio :value="0">小</a-radio>
        </a-radio-group>
      </a-form-item>

      <!-- 宝鸡泵业项目定制的大门未关闭算法，新增房间ID字段 -->
      <!-- 大门未关闭在选择“大”房间时，房间ID点击显示11、12、13号选择项，选择房间大小未“小”时，房间ID点击显示：15、16、17号选项 -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.GATE_NOTCLOSE"
        :name="['aiSrvExtraArgs', 'roomID']"
        :rules="[{ required: true, message: '请选择房间ID字段' }]"
        class="hide-required form-item"
      >
        <template #label>
          <span>房间ID</span>

          <a-tooltip
            placement="top"
            :title="`产生报警后再次产生报警的时间间隔, 数值范围：10～17，默认值：10`"
          >
            <i class="iconfont icon-information-line"></i>
          </a-tooltip>
        </template>

        <a-select
          v-model:value="serviceForm.aiSrvExtraArgs.roomID"
          max-tag-count="responsive"
          placeholder="请选择房间ID字段"
          allow-clear
          :show-search="false"
          show-arrow
          style="width: 318px"
          :get-popup-container="
            (triggerNode: any) => {
              return triggerNode.parentNode;
            }
          "
        >
          <a-select-option
            :key="item.value"
            v-for="item in !BigOrSmall ? LargeRoomId : SmallRoomId"
            :value="item.value"
          >
            <div class="center" style="justify-content: space-between">
              {{ item.label }}
            </div>
          </a-select-option>
        </a-select>
      </a-form-item>

      <!--防护面罩算法，新增maskRoomSize防护面罩房间大小  0小1大   -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.MASK"
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'maskRoomSize']"
        :rules="[
          { required: true, message: '请选择房间大小', trigger: 'change' },
        ]"
      >
        <template #label> <span>房间大小</span> </template>
        <a-radio-group
          v-model:value="serviceForm.aiSrvExtraArgs.maskRoomSize"
          class="background"
        >
          <a-radio :value="1">大</a-radio>
          <a-radio :value="0">小</a-radio>
        </a-radio-group>
      </a-form-item>
      <!--焊接规范检测算法，新增weldingRangeWidth焊接规范范围    -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.WELDING"
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'weldingRangeWidth']"
        :rules="[
          { required: true, message: '请输入焊接规范', trigger: 'change' },
        ]"
      >
        <template #label>
          <span>焊接范围</span>

          <a-tooltip
            placement="top"
            :title="`焊接规范, 数值范围：1～3600，默认值：500`"
          >
            <i class="iconfont icon-information-line"></i>
          </a-tooltip>
        </template>
        <a-tooltip
          placement="bottom"
          title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！"
          trigger="focus"
        >
          <a-input-number
            id="inputNumber"
            v-model:value="serviceForm.aiSrvExtraArgs.weldingRangeWidth"
            :min="1"
            :max="3600"
            :precision="0"
            style="width: 104px; height: 36px"
          />
        </a-tooltip>
      </a-form-item>

      <!-- 宝鸡泵业项目定制的区域无人算法，新增设备联动报警功能 -->
      <a-form-item
        v-if="serviceForm?.aiSrvId === ServiceEnum.NOONE_AREA"
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'algorithmLinkageAlarm']"
        :rules="[
          { required: true, message: '请选择设备联动报警', trigger: 'change' },
        ]"
      >
        <template #label>
          <span>设备联动报警</span>
        </template>
        <a-radio-group
          v-model:value="serviceForm.aiSrvExtraArgs.algorithmLinkageAlarm"
          class="background"
          @change="onEquipmentLinkageAlarmChange"
        >
          <a-radio :value="0">关闭</a-radio>
          <a-radio :value="1">开启</a-radio>
        </a-radio-group>
        <a-form-item
          v-if="
            serviceForm?.aiSrvExtraArgs?.algorithmLinkageAlarm === 1 ||
            serviceForm?.aiSrvId !== ServiceEnum.NOONE_AREA
          "
          :name="['aiSrvExtraArgs', 'algorithmLinkageAlarmList']"
          :rules="[
            {
              required: true,
              message: '请选择设备联动报警',
              trigger: 'change',
            },
          ]"
        >
          <a-cascader
            v-model:value="serviceForm.aiSrvExtraArgs.algorithmLinkageAlarmList"
            max-tag-count="responsive"
            :options="treeData"
            :field-names="{ label: 'label', value: 'id', children: 'children' }"
            expand-trigger="hover"
            placeholder="请选择联动设备及算法"
            allow-clear
            style="width: 313px; height: 38px; margin-top: 20px"
            show-arrow
            @change="changeAlgorithmLinkage"
          />
        </a-form-item>
      </a-form-item>
      <!-- =======================宝鸡定制算法表单结束======================= -->

      <a-form-item name="avAlarmStatus" class="hide-required form-item">
        <template #label>
          <span>声光报警器</span>
          <a-tooltip
            placement="top"
            :title="`外接声光报警器，并语音提示：${
              alarmsHintMap[serviceForm?.aiSrvId!]
            }`"
          >
            <global-svg-icon
              icon-name="information-line"
              style="margin-left: 3px"
            ></global-svg-icon>
          </a-tooltip>
        </template>
        <a-radio-group v-model:value="serviceForm.avAlarmStatus">
          <a-radio :value="0">关闭</a-radio>
          <a-radio :value="1">开启</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item class="hide-required form-item" name="validCycleTime">
        <template #label>
          <span>有效时间段</span>
        </template>
        <global-select-time
          ref="selectTimeRef"
          v-model:axis-list="serviceForm.validCycleTime"
        ></global-select-time>
        <!-- <GlobalSelectTime ref="selectTimeRef" /> -->
      </a-form-item>

      <a-form-item
        v-if="
          serviceForm?.aiSrvId === ServiceEnum.FACE_RECOGNITION &&
          serviceForm.aiSrvExtraArgs.livenessDetection === 1
        "
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'livenessDetectionAlgorithmSensitivity']"
        :rules="[{ required: true, message: '请输入活体灵敏度' }]"
      >
        <template #label>
          <span>活体灵敏度</span>
          <a-tooltip placement="top" title="数值越小越容易触发告警">
            <global-svg-icon
              icon-name="information-line"
              style="margin-left: 3px"
            ></global-svg-icon>
          </a-tooltip>
        </template>
        <div class="form-item-slider">
          <a-slider
            v-model:value="
              serviceForm.aiSrvExtraArgs.livenessDetectionAlgorithmSensitivity
            "
            :min="0"
            :max="100"
          ></a-slider>
          <a-form-item no-style class="hide-required form-item">
            <a-input-number
              id="inputNumber"
              v-model:value="
                serviceForm.aiSrvExtraArgs.livenessDetectionAlgorithmSensitivity
              "
              :min="0"
              :max="100"
              :precision="0"
            ></a-input-number>
          </a-form-item>
          &nbsp;&nbsp;%
        </div>
      </a-form-item>

      <a-form-item
        v-if="
          serviceForm?.aiSrvId === ServiceEnum.UNIFORM && showCoverallsLibrary
        "
        style="margin-top: 32px"
        :name="['aiSrvExtraArgs', 'uniformLight']"
        :rules="[{ required: true, message: '请选择使用场景' }]"
      >
        <template #label>
          <span>使用场景</span>
        </template>
        <a-radio-group
          v-model:value="serviceForm.aiSrvExtraArgs.uniformLight"
          @change="uniformLightChange"
        >
          <a-radio :value="1">室外</a-radio>
          <a-radio :value="0">室内</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        v-if="
          serviceForm?.aiSrvId === ServiceEnum.UNIFORM && showCoverallsLibrary
        "
        class="hide-required form-item"
        :name="['aiSrvExtraArgs', 'uniformColor']"
        :rules="[{ required: true, message: '请选择工服颜色' }]"
      >
        <template #label>
          <span>工服颜色</span>
        </template>
        <a-select
          v-model:value="serviceForm.aiSrvExtraArgs.uniformColor"
          mode="multiple"
          max-tag-count="responsive"
          placeholder="请选择工服颜色"
          allow-clear
          :show-search="false"
          show-arrow
          style="width: 318px"
        >
          <a-select-option
            :key="item"
            v-for="item in colorList"
            :value="item.value"
          >
            <div class="center" style="justify-content: space-between">
              {{ item.label }}
              <div class="color-box" :style="{ background: item.color }"></div>
            </div>
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        v-if="
          serviceForm?.aiSrvId === ServiceEnum.FACE_RECOGNITION &&
          showFaceLibrary
        "
        class="hide-required form-item"
      >
        <template #label>
          <span>人脸库</span>
          <a-tooltip placement="top" title="请上传不同角度和不同光照下的照片">
            <global-svg-icon
              icon-name="information-line"
              style="margin-left: 3px"
            ></global-svg-icon>
          </a-tooltip>
        </template>
        <face-library></face-library>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts" name="service-form">
import { FormInstance } from "ant-design-vue";
import { g6DeepClone } from "glasssix-utils-ts";
import { Rule } from "ant-design-vue/es/form";
import { deepEqual } from "@/global-utils/base.utils";
// import CoverallsLibrary from './coveralls-library.vue';
import {
  complexColorList,
  evenColorList,
  ServiceEnum,
  alarmsHintMap,
  LargeRoomId,
  SmallRoomId,
} from "../config";
import { AIConfigurationAPI, BoxManageApi } from "../../../api";
import { useDeleteModal } from "@/global-hooks/base.hooks";

defineProps({
  showFaceLibrary: {
    type: Boolean,
    default: true,
  },
  showCoverallsLibrary: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

// /**
//  * 表单
//  */
interface ServiceForm {
  id?: number;
  aiSrvId?: number;
  aiSrvStatus?: number;
  aiSrvTriggerInterval: number;
  aiSrvDelayTriggerSeconds: number;
  aiSrvAlgorithmSensitivity: number;
  alertImageType: number;
  avAlarmStatus: number;
  validCycleTime: any[];
  aiSrvExtraArgs: any;
  aiSrvAlarmName: string;
  intervalMin?: number;
  intervalMax?: number;
  delayMin?: number;
  delayMax?: number;
  aiSrvType?: number;
  boxSerial?: string;
}
const serviceFormRef = ref<FormInstance>();
const serviceForm = ref<ServiceForm>({
  validCycleTime: [],
  aiSrvTriggerInterval: 0,
  aiSrvDelayTriggerSeconds: 0,
  aiSrvAlgorithmSensitivity: 0,
  alertImageType: 0,
  avAlarmStatus: 0,
  aiSrvExtraArgs: { alertSaveOriginalImage: 0 },
  aiSrvAlarmName: "",
});
const serviceRules: Record<string, Rule[]> = {
  validCycleTime: [
    { required: false, message: "请选择有效时间段", trigger: "change" },
  ],
  aiSrvTriggerInterval: [
    { required: true, message: "请输入触发间隔", trigger: "change" },
  ],
  aiSrvDelayTriggerSeconds: [
    { required: true, message: "请输入触发延迟", trigger: "change" },
  ],
  aiSrvAlgorithmSensitivity: [
    { required: true, message: "请输入算法灵敏度", trigger: "change" },
  ],
  alertImageType: [
    { required: true, message: "请选择告警图像保存", trigger: "change" },
  ],
  avAlarmStatus: [
    { required: true, message: "请选择声光报警器", trigger: "change" },
  ],
  serviceName: [
    { required: true, message: "请选择活体检测", trigger: "change" },
  ],
  aiSrvAlarmName: [
    { required: true, message: "请输入报警名称", trigger: "blur" },
  ],
};
const colorList = computed(() => {
  const mode = serviceForm.value?.aiSrvExtraArgs?.uniformLight;
  return mode === 1 ? evenColorList : complexColorList;
});

/**
 * 获取表单数据
 */
const getFormData = async () => {
  try {
    await serviceFormRef.value?.validate();
    return Promise.resolve(serviceForm.value);
  } catch (error) {
    return Promise.reject(error);
  }
};

/**
 * 获取表单是否有变化
 */
const getIsChange = async (): Promise<boolean> => {
  console.log("表单", serviceForm.value);

  const { data } = await AIConfigurationAPI.resetDefaultAiConfig({
    aiSrvType: serviceForm.value.aiSrvType,
    boxSerial: serviceForm.value.boxSerial,
    id: serviceForm.value.id,
  });
  return !deepEqual(serviceForm.value, data, [
    "deviceAreaId",
    "deviceId",
    "id",
    "aiSrvName",
    "selected",
    "sort",
    "useDefaultConfig",
  ]);
};

/**
 * 设置服务类型
 */
const selectTimeRef = ref<any>();
/**
 * 设置表单数据
 */
const oldFormData = reactive<ServiceForm>({} as ServiceForm); //老数据 用于部分值保留
const setFormData = (data: ServiceForm): void => {
  data.aiSrvId = data.aiSrvType;
  serviceForm.value = data;
  Object.assign(oldFormData, g6DeepClone(data));
  selectTimeRef.value?.setAxisList(data.validCycleTime);

  if (data.aiSrvId === 34) {
    getDevicesAlgorithm(data.aiSrvId);
  }

  if (data.aiSrvId === 29) {
    BigOrSmall.value = serviceForm.value?.aiSrvExtraArgs?.doorRoomSize ? 0 : 1;
  }
};

/**
 * 改变使用场景值
 */

const uniformLightChange = (e: any) => {
  // 保存工服颜色值
  if (e.target.value === oldFormData.aiSrvExtraArgs.uniformLight) {
    serviceForm.value.aiSrvExtraArgs.uniformColor =
      oldFormData.aiSrvExtraArgs.uniformColor;
  } else {
    serviceForm.value.aiSrvExtraArgs.uniformColor = [8];
  }
};

// =======================宝鸡定制算法表单开始=======================
const { setOpenDeleteModal } = useDeleteModal();
const route = useRoute();
const BigOrSmall = ref<boolean | number>(true);
// 改变房间大小
const changeRoomSise = (size: string | number) => {
  BigOrSmall.value = size ? 0 : 1;
  serviceForm.value.aiSrvExtraArgs.roomID = size ? 10 : 15;
};

const onEquipmentLinkageAlarmChange = async (_checked: any) => {
  const content = {
    title:
      serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarm === 1
        ? "开启后，请选择联动报警的设备以及算法。选择后，当前算法将会根据选择的对应设备下算法抓拍结果，去判断是否启动抓拍"
        : "关闭后，将和联动设备解绑，同时恢复单独检测模式",
  };

  const closeFun = async () => {
    serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarm =
      _checked.target.value;
  };
  const expandCallBack = () => {
    serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarm =
      _checked.target.value === 1 ? 0 : 1;
  };
  setOpenDeleteModal(closeFun, content, expandCallBack);
};

// 宝鸡定制算法区域无人 id 34
type TreeData = {
  areaId: string;
  children: TreeData[] | null;
  id: number;
  label: string;
};
const treeData = ref([]);
const getDevicesAlgorithm = async (id: number) => {
  try {
    let { data } = await BoxManageApi.getDevicesAlgorithms({
      aiSrvType: id,
      boxSerial: route.query.boxSerial,
    });
    treeData.value = data;
  } catch (error) {
    console.log("error", error);
  }
};

// 递归筛选
const findObjectById = (data: any, id: string): any => {
  for (let i = 0; i < data.length; i++) {
    const obj = data[i];

    if (obj.id === id) {
      return obj;
    }
    if (obj?.children && obj?.children?.length > 0) {
      const result = findObjectById(obj.children, id);
      if (result) {
        return result;
      }
    }
  }
  return null;
};
const changeAlgorithmLinkage = (value: any): void => {
  value?.forEach((item: any) => {
    const re = findObjectById(treeData.value, item[item.length - 1]);

    if (re?.children) {
      re.children.forEach((itemChild: any) => {
        serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarmList.push(
          itemChild?.id as never
        );
      });
    } else {
      // serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarmList.push(re?.id as never)
    }
  });
};

// =======================宝鸡定制算法表单结束=======================

/**
 * 同步获取表单数据
 */
const getFormDataSync = () => serviceForm.value;

defineExpose({
  getFormData,
  setFormData,
  getFormDataSync,
  getIsChange,
});
</script>

<style lang="less">
.service-form {
  overflow-y: scroll;
  width: 100%;

  .form-item {
    margin-top: 32px;
    color: @text03;
  }

  .ant-slider-rail {
    background: #171820;
  }

  .ant-slider-track {
    background: @secondary04;
  }

  // .ant-form-item-label {
  // 	margin-top: 32px;
  // }

  .ant-modal-footer {
    position: absolute;
  }

  .ant-form-item-control-input-content {
    color: @text02;
  }

  .ant-input-number {
    border: 1px solid @mask02;
    border-radius: 6px;
    background: transparent !important;
  }

  .form-item-slider {
    display: flex;
    align-items: center;

    .ant-slider {
      width: 231px;
      margin-right: 15px;
      margin-left: 10px;
    }
  }

  .iconfont {
    margin-left: 8px;
    color: @text04;
  }
}

.center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.color-box {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
}
</style>
